<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		html,body{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		#sun{
			width:200px; height: 200px; background: orange;
			position: absolute; left: 400px; top: 200px;
			border-radius: 50%;
		}
	</style>
	<script type="text/javascript">
		//y = ax^2 + bx + c
		//曲线过原点，则C为0
		//a = 1;
		//b = ????		做一条抛物线穿过点a 和	b
		//		|				*
		//		|			*		 *	点b
		//		|  		*				*o
		//		|   *
		//		| *
		//		|*
		//______o_______________________________________
		//		|原点为点a所在位置
		//		|
		//当把点a假设为坐标原点时
		onload = function(){
			var earth = document.getElementById("earth");
			var moon = document.getElementById("moon");
			//设变量a
			var a = 0.002;
			//点a所在原点位置
			var center_earth = {x:earth.offsetLeft+earth.offsetWidth/2, y:earth.offsetTop + earth.offsetHeight/2};
			//点b所在坐标系上的位置
			var point_moon = {x:moon.offsetLeft + moon.offsetWidth/2 - center_earth.x, y:moon.offsetTop + moon.offsetHeight/2 - center_earth.y};
			//求b
			var b = (point_moon.y - a*point_moon.x*point_moon.x)/point_moon.x;
			var x = 0;
			var move = setInterval(function(){
				earth.style.left = center_earth.x - earth.offsetWidth/2 + ++x + "px";
				earth.style.top = center_earth.y - earth.offsetHeight/2 + a*x*x + b*x + "px";
				if(earth.offsetLeft >= moon.offsetLeft){
					clearInterval(move);
				}
			},10);
		}
		
	</script>
	<body>
		<div id="earth" style="width: 30px; height: 30px; border-radius: 50%; position: absolute; left:100px; top: 400px; background: blue;">
			
		</div>
		
		<div id="moon" style="width: 30px; height: 30px; border-radius: 50%; position: absolute; left:800px; top: 200px; background: gray;">
			
		</div>
	</body>
</html>
